<template >
    <el-config-provider :locale="store.localeLang">
        <div class="login">
            <el-drawer
                v-model="drawer"
                size="80%"
                direction="ltr"
                :show-close="false"
                :before-close="handleDrawer"
                style="background-color: #1c3f56"
                :with-header="false"
            >
                <Drawer :drawer="drawer" />
            </el-drawer>
            <!-- <router-view v-if="showRouter" /> -->
            <router-view v-slot="{ Component }">
                <keep-alive :exclude="route11">
                    <component :is="Component" />
                </keep-alive>
            </router-view>
        </div>
    </el-config-provider>
</template>

<script lang="ts" setup>
import { defineComponent, ref, onBeforeMount, onMounted, watch, provide } from 'vue'
import { ElConfigProvider } from 'element-plus'
import Drawer from "./views/login/modelComponents/Drawer.vue";
import { ipoStore } from "@/stores/ipo"
import router from './router'
import { getCurrentInstance } from 'vue'
import axios from 'axios';
const drawer = ref(false)
const drawer1 = ref(false)
const { proxy } = (getCurrentInstance() as any)
const showRouter = ref(true)
const route11 = ref(["", "XIPO", "Xdashboard"])
const reflashRouter = () => {
  showRouter.value = false;
  setTimeout(() => {
    showRouter.value = true
  }, 1)
}
const handleOnDrwaer = (bool: boolean) => {
  console.log("dakai", bool)
  drawer.value = bool
}
provide('reflashRouter', reflashRouter);
provide('handleOnDrwaer', handleOnDrwaer);
function isMobileFn() {
  return 768 >= document.documentElement.clientWidth;//判断当前浏览器窗口的宽度是否小于等于768像素，如果是返回true
}

const isMobile = ref(isMobileFn() ? true : false);
const store = ipoStore();
onBeforeMount(() => {
  setFontSize()
})
onMounted(() => {
  let screenWidth = 1500;
  document.documentElement.style.setProperty('--screen', screenWidth + '');
  const langHref = window.location.href.split("home")[1]
  if (langHref == '?lang=en') {
    proxy.$i18n.locale = 'en'
    store.setLocale(1)
  } else if (langHref == '?lang=tc') {
    proxy.$i18n.locale = 'zhCt'
    store.setLocale(2)
  } else if (langHref == '?lang=sc') {
    proxy.$i18n.locale = 'zhCn'

    store.setLocale(3)
  }
  reflashRouter()
  // const t = "https://ti.sanmaoyou.com/pdf/dc82d632c9fcecb0778afbc7924494a6.pdf"
  // const y = "http://localhost:3000/api/file/download/EN?ipoID=02407"
  //   axios.get(t)
  //  // axios.get(y)
  //  test
  //  async function test(){
  //     const res = await axios.get(t)
  //     console.log(res.status);

  //   }
})
const setFontSize = () => {
  // 以ipone6手机为例,1rem=1px;   以后就在ipone6手机模拟器开发，把rem当作px用就行了
  var font = document.documentElement.clientWidth / 375;
  document.documentElement.style.fontSize = font + "px";
}
const handleDrawer = (done: () => void) => {
  done();
}

</script>

<style lang="scss" >
// @import url(./vars.scss);
// $bg-color: red;
// @media (max-width: 767px) {
//   .login {
//     width: 100vw;
//     height: fit-content;
//     background-color: blue;
//   }
// }

// @media (min-width: 768px) {
//   .login {
//     width: 100vw;
//     height: 100vh;
//     // background-color: blue;
//   }
// }

// @media (min-width: 992px) {
//   .login {
//     height: 100%;
//     width: 100%;
//     // background-color: pink;
//   }
// }

// @media (min-width: 1200px) {
//   .login {
//     height: 1100px;
//     width: 100%;
//     // background-color: pink;
//   }
// }

.login {
    background-image: url('@/assets/1x/beijingtu.png');
    background-repeat: no-repeat;
    background-size: cover;
    //height: 100%;
    width: 1900px;

    //height: 1300px;
    //overflow: hidden;
    //  position: fixed;
    //   width: 100%;
    //   height: 2000px;
    //      background-size:100% 100%;
    @media screen and (max-width: 768px) {
        max-width: 100vw;
        overflow: auto;
        overflow-x: hidden;
        height: 100%;
    }
}
</style>
